<template>
    <ul class="logistics">
        <template v-if="orderDetail.logisticsExpressInfo && orderDetail.logisticsExpressInfo.status">
            <li>
                <span class="flag">
                    <img src="/images/wl.png" alt=""/>
                </span>
                <div class="info">
                    <span class="start">物流状态</span>
                </div>
            </li>

            <li>
                <span class="flag">
                    <img src="/images/fg.png" alt=""/>
                </span>
                <div class="info">
                    <div class="time">早上01:10</div>
                    <div class="con">广东省东莞市宝安接驳点公司 已收入</div>
                </div>
            </li>
            <li>
                <span class="flag">
                    <img src="/images/fg.png" alt=""/>
                </span>
                <div class="info">
                    <div class="time">早上01:10</div>
                    <div class="con">广东省东莞市宝安接驳点公司 已收入</div>
                </div>
            </li>
        </template>
        <div v-else class="">
            暂无物流信息
        </div>
    </ul>
    
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
export default {
    props:{
        orderDetail:Object
    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .logistics{
        position: relative;
        z-index: 10;
        list-style: none;
        padding: 20px;
        margin: 0 0 30px 0;
        background: rgba(14, 97, 97, 0.7);
        font-size: 26px;
        overflow: hidden;
        &::before{
            content: '';
            position: absolute;
            z-index: 10;
            left: 34px;
            top: 40px;
            height: 100%;
            width: 0;
            border-left:2px dashed #507161 ;
        //    background: url('/images/wlx.png');
        //    background-size: 2px auto;
        }
        li{
            display: flex;
            padding: 7px 0;
            position: relative;
            z-index: 12;
            .flag{
                display: flex;
                justify-content: center; 
                width: 32px;
                overflow: hidden;
                img{
                    display: block;
                    max-width: 32px;
                    max-height: 32px;
                    margin: 2px 0 0 0;
                }
            }
            .info{
                flex: 1;
                padding: 0 0 0 18px;
                .start{
                    color: var(--baseColor);
                }
                .con{
                    padding: 15px 0 0 0;
                }
            }
        }
    }
</style>